<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码 - 内容评级平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
            }
            .form-label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            .error-message {
                @apply text-danger text-xs mt-1 block;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen font-inter">
<div class="container mx-auto px-4 py-12 md:py-20 max-w-4xl">
    <!-- 主卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="grid md:grid-cols-2">
            <!-- 左侧图片区域 -->
            <div class="hidden md:block bg-gradient-to-br from-primary to-secondary p-8 flex items-center justify-center">
                <div class="text-white text-center">
                    <i class="fa fa-user-circle text-[100px] mb-6 opacity-80"></i>
                    <h3 class="text-2xl font-semibold mb-3">找回密码</h3>
                    <p class="opacity-90">通过邮箱或手机号找回密码</p>
                    <a href="Userregister.jsp" class="inline-block mt-6 px-6 py-3 bg-white/20 backdrop-blur-sm rounded-lg text-white font-medium btn-hover">
                        <i class="fa fa-user-plus mr-2"></i>立即注册
                    </a>
                </div>
            </div>

            <!-- 右侧表单区域 -->
            <div class="p-6 md:p-10">
                <!-- 移动端注册链接 -->
                <div class="md:hidden mb-6 text-center">
                    <p class="text-neutral-500">还没有账号？<a href="Userregister.jsp" class="text-primary font-medium">立即注册</a></p>
                </div>

                <!-- 错误提示 -->
                <% if (request.getAttribute("error") != null) { %>
                <div class="mb-6 p-3 bg-danger/10 text-danger rounded-lg text-sm">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <%= request.getAttribute("error") %>
                </div>
                <% } %>

                <!-- 成功提示 -->
                <% if (request.getAttribute("success") != null) { %>
                <div class="mb-6 p-3 bg-success/10 text-success rounded-lg text-sm">
                    <i class="fa fa-check-circle mr-2"></i>
                    <%= request.getAttribute("success") %>
                </div>
                <% } %>

                <!-- 找回密码表单 -->
                <form id="forgetPasswordForm" action="ForgetPasswordServlet" method="post">
                    <!-- 步骤1：输入用户名/邮箱/手机号 -->
                    <div id="step1">
                        <div class="mb-6">
                            <label for="account" class="form-label">
                                <i class="fa fa-user mr-1"></i>用户名/邮箱/手机号
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="text" id="account" name="account" required
                                       class="pl-10 w-full rounded-lg border border-neutral-300 py-3 px-4 text-neutral-700 form-input-focus"
                                       placeholder="请输入用户名、邮箱或手机号">
                            </div>
                            <div class="error-message" id="accountError"></div>
                        </div>

                        <button type="button" id="nextStepBtn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center">
                            <i class="fa fa-arrow-right mr-2"></i>下一步
                        </button>
                    </div>

                    <!-- 步骤2：验证方式选择和验证码 -->
                    <div id="step2" class="hidden">
                        <div class="mb-6">
                            <label class="form-label">
                                <i class="fa fa-shield mr-1"></i>验证方式
                            </label>
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:bg-neutral-50 transition-colors">
                                    <input type="radio" name="verifyMethod" value="email" class="mr-2 text-primary" checked>
                                    <i class="fa fa-envelope mr-1 text-primary"></i>邮箱验证
                                </label>
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:bg-neutral-50 transition-colors">
                                    <input type="radio" name="verifyMethod" value="sms" class="mr-2 text-primary">
                                    <i class="fa fa-mobile mr-1 text-primary"></i>短信验证
                                </label>
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="verificationCode" class="form-label">
                                <i class="fa fa-key mr-1"></i>验证码
                            </label>
                            <div class="flex gap-3">
                                <div class="relative flex-1">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-key"></i>
                                    </span>
                                    <input type="text" id="verificationCode" name="verificationCode" required
                                           class="pl-10 w-full rounded-lg border border-neutral-300 py-3 px-4 text-neutral-700 form-input-focus"
                                           placeholder="请输入验证码">
                                </div>
                                <button type="button" id="sendCodeBtn" class="w-32 bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover">
                                    获取验证码
                                </button>
                            </div>
                            <div class="error-message" id="codeError"></div>
                            <div id="sendSuccess" class="hidden text-success text-xs mt-1">
                                <i class="fa fa-check-circle mr-1"></i>验证码已发送，请查收
                            </div>
                        </div>

                        <div class="flex gap-3">
                            <button type="button" id="prevStepBtn" class="flex-1 bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center">
                                <i class="fa fa-arrow-left mr-2"></i>上一步
                            </button>
                            <button type="button" id="verifyCodeBtn" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center">
                                <i class="fa fa-check mr-2"></i>验证
                            </button>
                        </div>
                    </div>

                    <!-- 步骤3：重置密码 -->
                    <div id="step3" class="hidden">
                        <div class="mb-6">
                            <label for="newPassword" class="form-label">
                                <i class="fa fa-lock mr-1"></i>新密码
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="newPassword" name="newPassword" required
                                       class="pl-10 w-full rounded-lg border border-neutral-300 py-3 px-4 text-neutral-700 form-input-focus"
                                       placeholder="请输入新密码">
                                <button type="button" id="toggleNewPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                            <div class="error-message" id="newPasswordError"></div>
                        </div>

                        <div class="mb-6">
                            <label for="confirmNewPassword" class="form-label">
                                <i class="fa fa-lock mr-1"></i>确认新密码
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="confirmNewPassword" name="confirmNewPassword" required
                                       class="pl-10 w-full rounded-lg border border-neutral-300 py-3 px-4 text-neutral-700 form-input-focus"
                                       placeholder="请再次输入新密码">
                            </div>
                            <div class="error-message" id="confirmNewPasswordError"></div>
                        </div>

                        <div class="flex gap-3">
                            <button type="button" id="prevStep2Btn" class="flex-1 bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center">
                                <i class="fa fa-arrow-left mr-2"></i>上一步
                            </button>
                            <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center">
                                <i class="fa fa-save mr-2"></i>重置密码
                            </button>
                        </div>
                    </div>
                </form>

                <div class="mt-6 text-center">
                    <a href="Userlogin.jsp" class="text-primary hover:underline">
                        <i class="fa fa-arrow-left mr-1"></i>返回登录
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="text-center mt-8 text-neutral-500 text-sm">
        <p>© 2025 大运版权所有</p>
    </div>
</div>

<script>
    // 常量定义
    const FIXED_VERIFICATION_CODE = "123456"; // 固定验证码

    // DOM元素
    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const step3 = document.getElementById('step3');
    const nextStepBtn = document.getElementById('nextStepBtn');
    const prevStepBtn = document.getElementById('prevStepBtn');
    const prevStep2Btn = document.getElementById('prevStep2Btn');
    const verifyCodeBtn = document.getElementById('verifyCodeBtn');
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    const toggleNewPassword = document.getElementById('toggleNewPassword');
    const form = document.getElementById('forgetPasswordForm');
    const sendSuccess = document.getElementById('sendSuccess');

    // 步骤切换
    nextStepBtn.addEventListener('click', () => {
        const account = document.getElementById('account').value.trim();
        if (!account) {
            document.getElementById('accountError').textContent = '请输入用户名、邮箱或手机号';
            document.getElementById('accountError').style.display = 'block';
            return;
        }

        step1.classList.add('hidden');
        step2.classList.remove('hidden');
    });

    prevStepBtn.addEventListener('click', () => {
        step2.classList.add('hidden');
        step1.classList.remove('hidden');
    });

    prevStep2Btn.addEventListener('click', () => {
        step3.classList.add('hidden');
        step2.classList.remove('hidden');
    });

    // 发送验证码
    sendCodeBtn.addEventListener('click', () => {
        const account = document.getElementById('account').value.trim();
        const verifyMethod = document.querySelector('input[name="verifyMethod"]:checked').value;

        if (!account) {
            document.getElementById('accountError').textContent = '请输入用户名、邮箱或手机号';
            document.getElementById('accountError').style.display = 'block';
            return;
        }

        // 禁用按钮防止重复点击
        sendCodeBtn.disabled = true;

        // 显示发送成功提示
        sendSuccess.classList.remove('hidden');

        // 实际应用中这里应该发送AJAX请求到后端发送验证码
        console.log(`向${account}发送${verifyMethod == 'email' ? '邮箱' : '短信'}验证码`);

        // 3秒后恢复按钮状态
        setTimeout(() => {
            sendCodeBtn.disabled = false;
        }, 3000);
    });

    // 验证验证码
    verifyCodeBtn.addEventListener('click', () => {
        const inputCode = document.getElementById('verificationCode').value.trim();

        if (!inputCode) {
            document.getElementById('codeError').textContent = '请输入验证码';
            document.getElementById('codeError').style.display = 'block';
            return;
        }

        if (inputCode !== FIXED_VERIFICATION_CODE) {
            document.getElementById('codeError').textContent = '验证码错误，请重新输入';
            document.getElementById('codeError').style.display = 'block';
            return;
        }

        // 验证通过，进入下一步
        step2.classList.add('hidden');
        step3.classList.remove('hidden');
    });

    // 密码显示/隐藏切换
    toggleNewPassword.addEventListener('click', function() {
        const passwordInput = document.getElementById('newPassword');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 表单提交验证
    form.addEventListener('submit', function(e) {
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmNewPassword').value;
        let isValid = true;

        // 验证新密码
        if (!newPassword) {
            document.getElementById('newPasswordError').textContent = '请输入新密码';
            document.getElementById('newPasswordError').style.display = 'block';
            isValid = false;
        } else if (newPassword.length < 6) {
            document.getElementById('newPasswordError').textContent = '密码长度不能少于6位';
            document.getElementById('newPasswordError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('newPasswordError').style.display = 'none';
        }

        // 验证确认密码
        if (!confirmPassword) {
            document.getElementById('confirmNewPasswordError').textContent = '请确认新密码';
            document.getElementById('confirmNewPasswordError').style.display = 'block';
            isValid = false;
        } else if (confirmPassword !== newPassword) {
            document.getElementById('confirmNewPasswordError').textContent = '两次输入的密码不一致';
            document.getElementById('confirmNewPasswordError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('confirmNewPasswordError').style.display = 'none';
        }

        if (!isValid) {
            e.preventDefault();
        }
    });
</script>
</body>
</html>